<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/templates/general.xhtml">

    <ui:define name="title"><h:outputText value="Stock" /></ui:define>

    <ui:define name="head">

    </ui:define>

    <ui:define name="content">

        <h:form id="form">

            <f:facet name="first">
                <script type="application/javascript" src="#{request.contextPath}/js/script.js" />
            </f:facet>

            <p:growl id="growl" showDetail="false" sticky="false" autoUpdate="true" life="3000" />

            <div style="text-align: center;">
                <p:commandButton value="Clear Fields" actionListener="#{stockService.clearFields()}" update="productTable" style="margin-right: 20px" styleClass="btn btn-danger"/>
                <p:commandButton value="Update Stock" actionListener="#{stockService.updateStock()}" update="productTable" styleClass="btn btn-success"/>
            </div>

            <p:dataTable id="productTable" var="p" value="#{stockService.products}" editable="true"
                         editMode="cell" style="width: 840px; margin: 10px auto;" styleClass="fixedTable cellInput newTableHeader"
                         >


                <p:column headerText="Product Number" style="width: 100px" sortBy="#{p.pno}">
                    <h:outputText value="#{p.pno}" />
                </p:column>

                <p:column headerText="Description" style="width: 600px" sortBy="#{p.desc}">
                    <h:outputText value="#{p.desc}"/>
                </p:column>

                <p:column headerText="Add to Stock" style="width: 70px; text-align: center;" sortBy="#{p.addToStock}">
                    <p:spinner id="stockSpinner" value="#{p.addToStock}" style="width: 50px" styleClass="stockSpinner" />
                </p:column>

                <p:column headerText="Total Shipped" style="width: 100px; text-align: center;" sortBy="#{p.totalShipped}">
                    <p:commandLink value="#{p.totalShipped}" oncomplete="invoiceDialog.show()" actionListener="#{stockService.setSelectedProduct(p)}" update=":invoiceDialog" />
                </p:column>

                <p:column headerText="In Stock" style="width: 70px; text-align: center;" sortBy="#{p.inStock}">
                    <h:outputText style="font-weight: bold;" value="#{p.inStock}" />
                </p:column>

            </p:dataTable>


            <span id="top-link-block" class="hidden">
                <a href="#top" class="well well-sm"  onclick="$('html,body').animate({scrollTop:0},'fast');return false;">
                    <i class="glyphicon glyphicon-chevron-up"></i> Back to Top
                </a>
            </span><!-- /top-link-block -->



        </h:form>




        <p:dialog id="invoiceDialog" widgetVar="invoiceDialog" dynamic="true" showEffect="fade" hideEffect="fade" modal="true" height="50%" width="1200px" header="Invoices for product" resizable="true">
            <h:form id="invoiceDialogForm">

                <p:dataTable id="invoiceTable" var="invoices" value="#{invoiceBean.getInvoicesByProduct(stockService.selectedProduct)}" style="text-align: center;"
                             liveScroll="false" scrollable="true" scrollHeight="500" styleClass="autoTable">
                    <p:subTable var="invoice" value="#{invoices.invoices}">
                        <f:facet name="header">
                            <br />
                            <br />
                            <h2>#{invoices.year}</h2>
                            <hr />
                            <tr class="invoiceTableHeaderRow">
                                <td>Nr.</td>
                                <td>Shipped</td>
                                <td>Delivery Date</td>
                                <td>Company</td>
                                <td>Delivery Address</td>
                                <td>Sum</td>
                            </tr>
                        </f:facet>
                        <p:column style="width: 10px" headerText="Nr" width="50px">
                            #{invoice.number}
                        </p:column>
                        <p:column headerText="Shipped" width="50px">
                            #{invoice.shippedProductCount}
                        </p:column>
                        <p:column headerText="Delivery Date" width="100px">
                            #{invoice.deliveryDate}
                        </p:column>
                        <p:column headerText="Company" width="200px">
                            #{invoice.buyerInfo.name}
                        </p:column>
                        <p:column style="width: 35%;" headerText="Delivery Address">
                            #{invoiceBean.compressedText(invoiceBean.getDeliveryNameAndAddress(invoice), 50)}
                        </p:column>
                        <p:column style="width: 10%;" headerText="Sum">
                            <h:outputText value="#{invoiceBean.setScale(invoice.totalAmount,2)} #{invoice.currency}" />
                        </p:column>

                        <p:columnGroup type="footer">
                            <p:row>
                                <p:column styleClass="invoiceTableFooterColumn" footerText="Total EUR:" colspan="5" style="text-align:right; color:black;" />
                                <p:column styleClass="invoiceTableFooterColumn" footerText="#{invoiceBean.setScale(invoices.totalEur,2)} EUR" style="color: black;" />
                            </p:row>
                            <p:row rendered="#{invoiceBean.setScale(invoices.totalNok,2) > 0}">
                                <p:column styleClass="invoiceTableFooterColumn" footerText="Total NOK:" colspan="5" style="text-align:right; color:black;" />
                                <p:column styleClass="invoiceTableFooterColumn" footerText="#{invoiceBean.setScale(invoices.totalNok,2)} NOK" style="color: black;" />
                            </p:row>
                        </p:columnGroup>
                    </p:subTable>
                </p:dataTable>
            </h:form>
        </p:dialog>



    </ui:define>

</ui:composition>